<template>
	<view class="container">
		<!--头部功能区和分享举报等-->

		<commonNavbar style="position: fixed; top: 0; display: block !important;"  :info="baseInfo" :id="articleId"></commonNavbar>

		<view class="mainPart">
			<!--文章正文和评论区-->
			<view class="main">
				
				<u-parse class="articleContent" :content="article" :selectable="true"></u-parse>
				<span style="width: 100%; height: 20upx; margin-top: 50upx; margin-bottom: 10upx;background-color: rgba(229, 229, 229, 0.6);"></span>
				<!-- <view class="articleContent" v-highlight v-html="article"></view> -->
<!-- 				文章评论区
				<view class="commentsList" style="letter-spacing: 0.1rem;">
					<view class="everComments" v-for="(item, index) in comments" :key="index">
						<view class="userBaseInfo">
							<div v-if="item.userIsVip" class="vipLogo t-icon t-icon-VIP" style="transform: rotate(60deg);"></div>
							<view class="head">
								<image v-if="headPic !== ''" :src="item.headPic"></image>
								<image v-else src=""></image>
							</view>
							<view class="nickName">
								{{item.nickName}}
								<div class="userTag">{{item.userTag}}</div>
							</view>
						</view>
						
						<view class="interaction">
							<view class="likes" @click="setLikes()">
								<view :class="[item.isLike==false?'t-icon t-icon-dianzan':'t-icon t-icon-dianzan-copy']" @click="changeLikeStatus(item.id)"></view>
								{{item.likes}}
							</view>
							<view class="commentThis t-icon t-icon-pinglun"></view>
						</view>
						
						<view class="commentContent" @click="prepareToComments()">
							<span class="leftMark t-icon t-icon-yinhao"></span>&nbsp;
							<p class="commentDetails">
								{{item.content}}
							</p>
							&nbsp;<span class="rightMark t-icon t-icon-yinhao" style="transform: rotate(180deg);"></span>
						</view>
					</view>
				</view> -->
				<commentsList :commentsList="comments"></commentsList>
			</view>	
		</view>
		
		
		<view class="bottomBar" :style="{bottom:inputBottom + 'px'}">
			<view class="inputStyle" style="transition: all 0.2s ease-in;" :style="{width: inputWidth + '%'}">
				
				<input 
				  @focus="focus"
				  @blur="blur"
				  type="text"
				  :adjust-position="false"
				  style="font-size: 0.8rem; border: 1px solid darkgrey; height: 80%; width: 100%;border-radius: 15px;padding-right: 5px; padding-left: 5px;"
				  placeholder="评论下..."
				  border="surround"
				  v-model="inputInfo"
				  @input = "getMessage"
				></input>
				
				<button class="sendComments" @click = "sendMessage()">
					<span>发送</span>
				</button>
			</view>
			
			<view class="bottomOptions" v-show="isShow">
				<div id="reSetIcon" class="t-icon t-icon-pinglun" @click="seeComments()"></div>
				<div id="reSetIcon" class="t-icon t-icon-favorites" @click="likeThisArticle()"></div>
				<div id="reSetIcon" class="t-icon" :class="[isLikeThisArticle==false?'t-icon-dianzan':'t-icon-dianzan-copy']" @click="isLikeThisArticle = !isLikeThisArticle"></div>
			</view>
		</view>
	</view>
	
</template>

<script>
	//import likesSvgUrl from '../../static/font/svg-iconfont/svgDataUrl.js'
	import { marked } from 'marked';
	import commonNavbar from '../components/commonNavbar.vue'
	import {mapState} from 'vuex'
	export default{
		components:{commonNavbar},
		data(){
			return{
				articleId: undefined,
				summary: null, //文章简介
				cover: null,
				isShow: true,
				inputWidth: 70,
				baseInfo:{
					id:null,
					userAvatar: "luoji.jpeg",
					userNickName: "暮商十二",
					tags:["西南石油大学"], 
					isVip: this.$store.state.loginUser.userBaseInfo.isVip,
					id: 0,
					introduce:''
				},
				viewCounts:0,
				inputBottom:0,
				// 占坑，分享连接到QQ或者微信，以后学了再补
				title:'',
				article:'<h3><a name="t2"></a><a id="_2"></a>简介</h3><p>JSON：即 <strong>JavaScript Object Notation JavaScript 对象简谱</strong>，它是一种<strong>数据交换的文本格式</strong>，一种特殊格式的字符串（可以<strong>被任意语言识别</strong>），而不是一种编程语言。它是 JavaScript 的严格子集，利用 JavaScript 中的几种模式来表示结构化数据。JSON只是和 JS拥有相同的语法，但它不属于JS。</p>', //后台请求到的文章内容
				//svglikesUrl: '"'+likesSvgUrl+'"',
				articleTags:[],
				isOpenMask: false,
				isLikeThisArticle: false,
				isInput:false,
				inputInfo: "",
				commentCount: null,
				likeCount: null,
				comments:[ //评论的数据结构是一个对象数组，
					{
						id: 0,
						userIsVip:true,
						isLike: false,
						headPic: "teamLogo.png",
						nickName: "恐龙卧底", //待优化方向：昵称可以加入简单的图标？
						userTag: "前端开发者",
						content: "+3\nghsioghjsioarhgoanfiuhsofheGBNJDSHGFKLNGAHGNJDAHG;O",
						time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						likes: 6, //点赞数量
						// 待加入功能： 层中层
						childrenCommentsNum: 0,
						childrenComments:[
							{
								
							}
						]
					},
					{
						id: 1,
						userIsVip:false,
						isLike: false,
						headPic: "teamLogo.png",
						nickName: "油专丁真", //待优化方向：昵称可以加入简单的图标？
						userTag: "打油部长",
						content: "扶戈威武士",
						time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						likes: 6, //点赞数量
						// 待加入功能： 层中层
						childrenCommentsNum: 0,
						childrenComments:[
							{
							}
						]
					},
					{
						id: 2,
						userIsVip:false,
						isLike: false,
						headPic: "teamLogo.png",
						nickName: "Rory", //待优化方向：昵称可以加入简单的图标？
						userTag: "油院丁真",
						content: "超长文本溢出测试: fsnefuhncjoasgfiBNEFOwuehfuioewhfbojNDFJSDn kcjbWIURFHOWIUehrfuohWOFNDLSJ个HFOHJOFHLKMLKHOSJDKMKGHSJISJDSGDJGLNM,SBKLFHnbfjiashefnlfkfoawefkahjfioqahfhbafhG;heoiht'WPIHFGNBJdsfnjdb;fhdbsuHF'Pwejjfknskjmbfgjiasghuoahgnk",
						time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						likes: 2, //点赞数量
						// 待加入功能： 层中层
						childrenCommentsNum: 0,
						childrenComments:[
							{
							}
						]
					},
					{
						id: 3,
						userIsVip:false,
						isLike: false,
						headPic: "teamLogo.png",
						nickName: "Rory", //待优化方向：昵称可以加入简单的图标？
						userTag: "油院丁真",
						content: "超长文本溢出测试: fsnefuhncjoasgfiBNEFOwuehfuioewhfbojNDFJSDn kcjbWIURFHOWIUehrfuohWOFNDLSJ个HFOHJOFHLKMLKHOSJDKMKGHSJISJDSGDJGLNM,SBKLFHnbfjiashefnlfkfoawefkahjfioqahfhbafhG;heoiht'WPIHFGNBJdsfnjdb;fhdbsuHF'Pwejjfknskjmbfgjiasghuoahgnk",
						time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						likes: 2, //点赞数量
						// 待加入功能： 层中层
						childrenCommentsNum: 0,
						childrenComments:[
							{
							}
						]
					},
					{
						id: 4,
						userIsVip:false,
						isLike: false,
						headPic: "teamLogo.png",
						nickName: "Rory", //待优化方向：昵称可以加入简单的图标？
						userTag: "油院丁真",
						content: "超长文本溢出测试: fsnefuhncjoasgfiBNEFOwuehfuioewhfbojNDFJSDn kcjbWIURFHOWIUehrfuohWOFNDLSJ个HFOHJOFHLKMLKHOSJDKMKGHSJISJDSGDJGLNM,SBKLFHnbfjiashefnlfkfoawefkahjfioqahfhbafhG;heoiht'WPIHFGNBJdsfnjdb;fhdbsuHF'Pwejjfknskjmbfgjiasghuoahgnk",
						time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						likes: 2, //点赞数量
						// 待加入功能： 层中层
						childrenCommentsNum: 0,
						childrenComments:[
							{
							}
						]
					},
				],
			}
		},
		methods:{
			setLikes(){ //点赞，需要改变图标样式，并axios传值给后台记录
				
			},
			changeLikeStatus(id){
				this.comments[id].isLike = !this.comments[id].isLike;
				if(this.comments[id].isLike){
					this.comments[id].likes++;
				}else{
					this.comments[id].likes--;
				}
				//这里还要发哥POST到后台
			},
			openMask(){
				this.isOpenMask = !this.isOpenMask
			},
			seeComments(){
				uni.createSelectorQuery().select('.commentsList').boundingClientRect(res => {
					uni.pageScrollTo({
						duration: 300,
						scrollTop: res.top
					})
				}).exec()
			},
			
			focus(e) {
				this.isShow = false,
				this.inputWidth = 90,
				this.inputBottom = e.detail.height
			},
			blur() {
				this.isShow = true,
				this.inputBottom = 0,
				this.inputWidth = 70
			},
			/*
			getMessage(e){
				this.inputInfo = e.detail.value;
			},*/
			sendMessage(){
				if(this.inputInfo != ""){
					this.comments.push({
						id: this.comments.length,
						userIsVip:false,
						isLike: false,
						headPic: "teamLogo.png",
						nickName: "Mike", //待优化方向：昵称可以加入简单的图标？
						userTag: "演绎丁真",
						content: this.inputInfo,
						time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						likes: 2, //点赞数量
						// 待加入功能： 层中层
						childrenCommentsNum: 0,
						childrenComments:[
							{
							}
						]
					})
					//还要补axios别忘了
				};
				this.inputInfo = ""
			},
			isMarkdown(text){
				let reg = /[#+\`{3}*{2}]/g //从最常用的来讲，markdown格式字符串最常出现 #、```、**
				return reg.test(text)
			}
		},
		computed:{
			...mapState({
				token: state => state.loginUser.token
				
			})
		},
		onLoad(id) {
			uni.onKeyboardHeightChange(()=>{
				this.inputBottom = 0
			})
			console.log('跳转成功')
			this.$axios.get(`http://162.14.102.246:8090/article/front/${id}`,{
				header:{
					xdzn_token: this.token,
					'Content-Type': 'application/x-www-form-urlencoded'
				}
			}).then(res => {
				console.log(res)
				if(res.data.code == 200){
					let data = res.data.data
					console.log(data)
				}
			})
			console.log(info)
			this.baseInfo.userAvatar = info.author.avatar;
			this.baseInfo.userNickName = info.author.nickname;
			this.baseInfo.id = info.author.id;
			this.title = info.title;
			this.viewCounts = info.viewCounts;
			this.articleTags = info.tagList;
			this.likeCount = info.likeCount;
			this.isLikeThisArticle = info.like
			this.cover = info.cover;
			this.summary = info.summary;
			this.articleId = info.id
			this.article = info.text
			this.article = this.isMarkdown(info.text) ? marked(info.text) : info.text
			
			console.log('数据分配成功')
			console.log(this.baseInfo)
			//分配
		}
	}
</script>

<style scoped>
	@import url("highlight.js/styles/arta.css");
	.setMask{
		z-index: 9999;
	}
	.normalStatus{
		z-index: 10;
	}
	.commonNavbar{
		position: fixed;
		z-index: 9999;
	}
	.container{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.articleContent{
		min-width: 1rem;
		width: 90%;
		margin-top: 1.2rem;
	}
	.mainPart{
		position: relative;
		top: 5.3rem;
		width: 100%;
		height: 47rem;
		display: flex;
		justify-content: center;
		overflow-y: scroll;
	}
	.main{
		position: absolute;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.commentsList{
		margin-top: 1rem;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 96%;
	}
	.everComments{
		margin: 0.4rem auto 0;
		min-height: 6.8rem;
		width: 100%;
		border-radius: 10px;
		font-size: 0.8rem !important;
	}
	.userBaseInfo{
		position: relative;
		float: left;
		top: 0.3rem;
		height: 2rem;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.vipLogo{
		position: absolute;
		left: 1rem;
		bottom: 1.2rem;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.head{
		height: 2.3rem;
		width: 2.3rem;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid rgba(98, 111, 118, 1.0);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.head>image{
		width: 2.1rem;
		height: 2.1rem;
	}
	.nickName{
		display: block;
		position: relative;
		left: 8px;
		top: -3%;
		width: 9rem;
		font-size: 1rem;
		font-weight: 500;
		color: rgba(40, 41, 47, 1.0);
	}
	.userTag{
		font-size: 0.75rem;
		color: #b2bec3;
	}
	.interaction{
		display: flex;
		justify-content: space-around;
		align-items: center;
		float: right;
		width: 6rem;
		height: 2rem;
	}
	.commentContent{
		width: 80%;
		margin: 2.9rem auto auto;
		word-wrap: break-word;
		word-break: normal;
	}
	.leftMark{
		position: relative;
		left: -5%;
	}
	.rightMark{
		position: relative;
		left: 100%;
		bottom: 0.1rem;
	}
	.commentsDetails{
		
	}
	.bottomBar{
		position: absolute;
		height: 3rem;
		width: 100%;
		border-top: 0.3px solid rgba(144, 147, 159, 1.0);
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgba(247, 247, 247, 1.0);
	}
	.bottomOptions{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 30%;
		letter-spacing: 0.5rem;
		transition: all 1s ease-in;
	}
	#reSetIcon{
		width: 1.6rem;
		height: 1.6rem;
	}
	.inputStyle{
		height: 70%;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: all 1s ease-in;
	}
	.sendComments{
		margin: 0;
		width: 5rem;
		height: 90%;
		background-color: deepskyblue;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.8rem;
		margin-left: 0.3rem;
		transition: all 1s ease-in;
	}
</style>  